<template>
  <div style="padding: 0px 20px">
    <div class="table-container" style="background: #fff">
      <div style="display: flex; justify-content: center; padding: 20px">
        <div style="display: flex; align-items: center; flex: 1">
          <!-- <el-row>
            <button :class="['menu-btn', tableKey == '' ? 'checkBtn' : '']" @click="filterDate(0)">全部</button>
            <button :class="['menu-btn', tableKey == '1' ? 'checkBtn' : '']" @click="filterDate(1)">日</button>
            <button :class="['menu-btn', tableKey == '2' ? 'checkBtn' : '']" @click="filterDate(2)">周</button>
            <button :class="['menu-btn', tableKey == '3' ? 'checkBtn' : '']" @click="filterDate(3)">月</button>
            <button :class="['menu-btn', tableKey == '4' ? 'checkBtn' : '']" @click="filterDate(4)">年</button>
          </el-row> -->
          <!-- <el-date-picker
            v-model="filterData.day"
            type="date"
            placeholder="选择日期"
            v-show="tableKey == 1"
            clearable="false"
            @change="fetchData()"
          ></el-date-picker>
          <el-date-picker
            v-model="filterData.week"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
            v-show="tableKey == 2"
            clearable="false"
            @change="fetchData()"
          ></el-date-picker>
          <el-date-picker
            v-model="filterData.month"
            type="month"
            placeholder="选择月"
            v-show="tableKey == 3"
            clearable="false"
            @change="fetchData()"
          ></el-date-picker>
          <el-date-picker
            v-model="filterData.year"
            type="year"
            placeholder="选择年"
            v-show="tableKey == 4"
            clearable="false"
            @change="fetchData()"
          ></el-date-picker> -->
          <!-- <el-date-picker
            v-model="dataArry"
            type="daterange"
            unlink-panels
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="fetchData()"
            format="yyyy-MM-dd"
            range-separator="至"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker> -->
        </div>

        <div style="display: flex; justify-content: right; align-items: center; flex: 1">
          <el-form
            ref="form"
            :inline="true"
            :model="queryForm"
            @submit.native.prevent
            style="display: flex; justify-content: center; align-items: center"
          >
            <el-select v-model="sortType" placeholder="排序规则" style="width: 160px; margin-right: 10px" @change="sortData($event, index)">
              <el-option label="设备数" value="0"></el-option>
              <el-option label="总产量" value="1"></el-option>
              <el-option label="NG电池数量" value="2"></el-option>
              <el-option label="良品率" value="3"></el-option>
              <el-option label="A级故障率" value="4"></el-option>
              <el-option label="B级故障率" value="5"></el-option>
              <el-option label="C级故障率" value="6"></el-option>
              <el-option label="总故障率" value="7"></el-option>
            </el-select>
            <el-select
              v-model="sortIndex"
              placeholder="升/降序"
              style="width: 100px; margin-right: 10px"
              @change="orderFuc()"
              v-show="sortType"
            >
              <el-option label="降序" :value="0"></el-option>
              <el-option label="升序" :value="1"></el-option>
            </el-select>
            <el-input v-model="queryForm.title" placeholder="项目名称/费用号" style="width: 200px; margin-right: 20px" />
            <!-- <el-tooltip class="item" effect="dark" content="点击查看原始数据" placement="bottom">
              <i
                class="el-icon-tickets"
                style="padding-left: 16px; font-size: 26px; color: #909399; cursor: pointer"
                @click="right = true"
              ></i>
            </el-tooltip> -->
          </el-form>
        </div>
      </div>

      <el-table
        ref="tableSort"
        :data="list"
        :element-loading-text="elementLoadingText"
        :height="height"
        :show-header="false"
        @row-click="openDetails"
      >
        <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column> -->
        <el-table-column label="项目名称" prop="projectName">
          <template #default="{ row }">
            <div style="display: flex; padding: 16px">
              <div style="flex: 0 0 60px">
                <el-avatar size="large" class="ava-style" :style="row.color">
                  {{ row.project_name?.charAt(0) }}
                </el-avatar>
              </div>
              <div style="margin-left: 10px; display: flex; flex-direction: column; align-items: left; justify-content: center">
                <div style="font-size: 16px; font-weight: 600">
                  {{ row.project_name }}
                </div>
                <div>
                  {{ row.cost_number }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="" prop="projectName">
          <template #default="{ row }">
            <el-descriptions direction="vertical" :column="3" border>
              <el-descriptions-item label="设备数量">
                <b>{{ row.devices_number ? row.devices_number + '台' : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="总产量">
                <b>{{ row.totalNumber ? row.totalNumber : '-' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="NG电池数量">
                <b>{{ row.ngNumber ? row.ngNumber : '-' }}</b>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="" prop="projectName">
          <template #default="{ row }">
            <el-descriptions direction="vertical" :column="3" border>
              <el-descriptions-item label="A级故障率">
                <b>{{ (row.AgPer ? row.AgPer : '0.00') + '‱' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="B级故障率">
                <b>{{ (row.BgPer ? row.BgPer : '0.00') + '‱' }}</b>
              </el-descriptions-item>
              <el-descriptions-item label="C级故障率">
                <b>{{ (row.CgPer ? row.CgPer : '0.00') + '‱' }}</b>
              </el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column label="良品率" prop="alarmTime">
          <template #default="{ row }">
            <div style="display: flex; flex-direction: column; align-items: left; justify-content: center">
              <div>良品率</div>
              <div style="font-size: 16px; font-weight: 600" v-if="row.okPer">
                <el-progress :percentage="parseFloat(row.okPer ? row.okPer : '0.00')" color="LimeGreen"></el-progress>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="总故障率" prop="alarmTime">
          <template #default="{ row }">
            <div style="display: flex; flex-direction: column; align-items: left; justify-content: center">
              <div>总故障率</div>
              <div style="font-size: 16px; font-weight: 600" v-if="row.totalNgPer">
                <el-progress :percentage="parseFloat(row.totalNgPer ? row.totalNgPer : '0.00')" color="red" :format="format"></el-progress>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer title="原始数据" :visible.sync="right" direction="rtl" size="30%">
      <el-table ref="tableSort" :data="list" :element-loading-text="elementLoadingText">
        <el-table-column label="序号" show-overflow-tooltip width="95">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
        <el-table-column label="设备编码" prop="equipmentCode" show-overflow-tooltip />
        <el-table-column label="治具号" prop="fixtureNumber" show-overflow-tooltip />
        <el-table-column label="报警内容" prop="alarmContent" show-overflow-tooltip />
        <el-table-column label="报警代码" prop="alarmCode" show-overflow-tooltip />
        <el-table-column label="报警等级" prop="alarmLevel" />
        <el-table-column label="发生时间" prop="alarmTime" width="200" />
        <el-table-column label="创建时间" prop="createdTime" width="200" />
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'

  import { getProjectTotalList } from '@/api/program'

  export default {
    name: 'project',
    filters: {},
    components: {
      VabChart,
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: '最近一周',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                picker.$emit('pick', [start, end])
              },
            },
            {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                picker.$emit('pick', [start, end])
              },
            },
          ],
        },
        orderValue: '',
        sortIndex: 0,
        right: false,
        // filterData: {
        //   day: '',
        //   week: '',
        //   month: '',
        //   year: '',
        // },
        dataArry: [],
        tableKey: '',
        sortType: '',
        fileList: [],
        imgShow: true,
        list: [],
        imageList: [],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
          startTime: '',
          endTime: '',
        },
        optionMonth: {
          color: '#fac858',
          grid: {
            left: '3%', //默认10%
            right: '4%', //默认10%
            bottom: '8%', //默认60
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line',
            },
          ],
        },
      }
    },
    computed: {
      height() {
        // return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchData()
    },
    watch: {
      'queryForm.title'(newValue, oldValue) {
        this.handleQuery()
      },
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      // filterDate(type) {
      //   this.tableKey = type
      //   if (type == 0) {
      //     this.fetchData()
      //   }
      // },
      openDetails(nodeData) {
        this.$router.push({ path: '/alarmStatistics/alarmReport', query: { id: nodeData.cost_number } })
      },
      // randomRgb() {
      //   let R = Math.floor(Math.random() * 130 + 110)
      //   let G = Math.floor(Math.random() * 130 + 110)
      //   let B = Math.floor(Math.random() * 130 + 110)
      //   console.log(R, G, B)
      //   if (R == 255 && G == 255 && B == 255) {
      //     return {
      //       background: 'rgb(' + R + ',' + G + ',' + B + ')',
      //       color: 'black',
      //     }
      //   }
      //   return {
      //     background: 'rgb(' + R + ',' + G + ',' + B + ')',
      //   }
      // },
      randomRgb(id) {
        let colorArry = [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6b8e23',
          '#ff00ff',
          '#3cb371',
          '#b8860b',
          '#30e0e0',
        ]
        return {
          background: colorArry[parseInt(id % 10)],
        }
      },
      orderFuc() {
        this.sortData(this.orderValue, '')
      },
      sortData(value, index) {
        this.orderValue = value
        let type = ''
        switch (value) {
          case '0':
            type = 'devices_number'
            break
          case '1':
            type = 'totalNumber'
            break
          case '2':
            type = 'ngNumber'
            break
          case '3':
            type = 'okPer'
            break
          case '4':
            type = 'AgPer'
            break
          case '5':
            type = 'BgPer'
            break
          case '6':
            type = 'CgPer'
            break
          case '7':
            type = 'totalNgPer'
            break
          default:
            break
        }
        if (this.sortIndex == 1) {
          this.list.sort((a, b) => a[type] - b[type])
        } else {
          this.list.sort((a, b) => b[type] - a[type])
        }
      },
      async fetchData() {
        console.log(999, this.dataArry)
        this.queryForm.startTime = this.dataArry ? this.dataArry[0] : ''
        this.queryForm.endTime = this.dataArry ? this.dataArry[1] : ''
        const { data, total } = await getProjectTotalList(this.queryForm)
        this.list = data
        this.total = total
        let _this = this
        this.list.forEach(function (item) {
          item.color = _this.randomRgb(item.id)
          item.okPer = item.totalNumber == 0 ? '0.00' : (((item.totalNumber - item.ngNumber) / item.totalNumber) * 100).toFixed(2)
          item.AgPer = item.totalNumber == 0 ? '0.00' : ((item.ANumber / item.totalNumber) * 10000).toFixed(2)
          item.BgPer = item.totalNumber == 0 ? '0.00' : ((item.BNumber / item.totalNumber) * 10000).toFixed(2)
          item.CgPer = item.totalNumber == 0 ? '0.00' : ((item.CNumber / item.totalNumber) * 10000).toFixed(2)
          item.totalNgPer =
            item.totalNumber == 0 ? '0.00' : (((item.ANumber + item.BNumber + item.CNumber) / item.totalNumber) * 10000).toFixed(2)
        })
      },
      format(percentage) {
        return `${percentage}‱`
      },

      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      // handleRemove(file, fileList) {
      //   console.log(file, fileList)
      // },
      // handlePreview(file) {
      //   console.log(file)
      // },
      // handleExceed(files, fileList) {
      //   this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      // },
      // beforeRemove(file, fileList) {
      //   return this.$confirm(`确定移除 ${file.name}？`)
      // },
    },
  }
</script>
<style scoped>
  .ava-style {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
  }
</style>
<style lang="scss" scoped>
  .menu-btn {
    padding: 5px 16px;
    margin-right: 20px;
    border-radius: 32px;
    color: #4e5969;
    border: 0px;
    background: #fff;
  }
  .menu-btn:active {
    background: #f2f3f5;
  }
  /* 按钮悬浮颜色 */
  .menu-btn:hover {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  .menu-btn:focus {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  /* 按钮点击颜色 */
  .menu-btn:active {
    background: #f2f3f5;
    border-color: #f2f3f5;
  }
  .project {
    ::v-deep {
      .el-card__body {
        padding: 0;
      }
      .el-card__header {
        padding: 10px 12px;
      }
    }
  }
  .checkBtn {
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
  }
</style>
